Bootstrap provides so many UI related things like css, styling, animation, useful tools like datetime picker, tables etc. which can be directly used to create interactive UI.
In this blog , I’m explaining how to make a datepicker using Bootstrap in ASP.Net
Example :-
In This Example we Create DatePicker With Help BootStrap File
Form Design:-
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="AutoComplete.aspx.cs"Inherits="AutoComplete"%>
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptsrc="Js/jquery-1.8.3.min.js"></script>
<scriptsrc="Js/jquery-ui-1.9.2.custom.min.js"></script>
<linkhref="Bootstrap/jquery-ui-1.10.3.custom.css"rel="stylesheet"/>
<linkhref="Content/LoginStyle.css"rel="stylesheet"/>
</head>
<body>
<formid="form1"runat="server">
<div>
<center>
<h1>Date Picker</h1>
</center>
<br/><br/>
<center>
<h2>Calender : </h2>
<divid="datepicker"></div>
</center>
</div>
</form>
</body>
</html>
<scripttype="text/javascript">
$(document).ready(function () {
$('#datepicker').datepicker({
inline: true
});
});
</script>
Create one div tag and give id datepicker then call datepicker() inside
$(document).ready(function () {} function.
Use this BootStrap File :-
<scriptsrc="Js/jquery-1.8.3.min.js"></script>
<scriptsrc="Js/jquery-ui-1.9.2.custom.min.js"></script>
<linkhref="Bootstrap/jquery-ui-1.10.3.custom.css"rel="stylesheet"/>
Download and add the above three files into your projects because it’s
mandatory for using the bootstrap libraries and methods.
Use datepicker Method :-
<script type="text/javascript">
$(document).ready(function () {
$('#datepicker').datepicker({//datepicker method
inline: true
});
});
</script>
Output
in my next post i'll explain aboutDialog using BootStrap in ASP.Net
Leave Comment